<template>
    <div>
        <h1>会员显示</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>面积</td>
                    <td>是否有窗</td>
                    <td>最多入住人数</td>
                    <td>房型价格</td>
                    <td>房型状态</td>
                    <td>门店外键</td>
                </tr>

                <tr v-for="itme in data.list" :key="itme.Id">
                    <td>{{ itme.Id }}</td>
                    <td>{{ itme.HouseTypeName }}</td>
                    <td><img :src="itme.Pic" width="100" height="100"></td>
                    <td>{{ itme.Area }}</td>
                    <td>{{ itme.IsWin }}</td>
                    <td>{{ itme.PepleCount }}</td>
                    <td>{{ itme.Price }}</td>
                    <td>{{ itme.State ?"上架":"下架"}}</td>
                    <td>{{ itme.ShopName }}</td>
                </tr>
            </tbody>
        </table>
        <span><b>共{{ data.totalcount }}条</b></span>
        <span><b>每页{{ info.pagesize }}条</b></span>
        <span><b>共{{ info.pageIndex }}/{{ data.totalpage }}页</b></span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageIndex-1)">
        <span v-for="itme in data.totalpage"@click="gopage(itme)">
        {{ itme }}
        </span>
        <input type="button" value="下一页" @click="gopage(info.pageIndex+1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageIndex">
        <input type="button" value="跳转" @click="gopage(info.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const rouder=useRouter();
const roude=useRoute();

let data:any=reactive({
    list:[],
    totalcount:0,
    totalpage:0
})
let info:any=reactive({
    pageIndex:1,
    pagesize:2
})
onMounted(()=>{
    getlists();
    
})

const getlists=()=>{
    axios({
        url:'/api/Houser/GetShow',
        method:'get',
        params:info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
const show=()=>{
    info.pageIndex=1;
    getlists();
}
const gopage=(num:any)=>{
    if(num<1)
{
    info.pageIndex=1;
    return;

}
if(num>data.totalpage)
{
    info.pageIndex=data.totalpage;
    return;
}
info.pageIndex=num;
    getlists();
};
</script>

<style scoped>

</style>